<script setup lang="ts">
import { } from "vue";
import { useRouter } from "vue-router";
import { QIcon } from "quasar";

const vueProps = defineProps<{
  route?: string;
  href?: string;
  hrefName?: string;

  hover?: boolean;
  icon?: string;
}>();

const $router = useRouter();

/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/
/*************** HTML ***************/

const jump = () => {
  if (vueProps.route) $router.push(vueProps.route);
  else if (vueProps.href) {
    if (vueProps.hrefName) window.open(vueProps.href, vueProps.hrefName);
    else location.replace(vueProps.href);
  }
};
</script>

<template>
  <a class="index cursor-pointer relative flex flex-nowrap items-center" @click="jump()">
    <span :class="{ 'hover:underline': vueProps.hover }">
      <slot></slot>
    </span>
    <q-icon v-if="vueProps.icon" :name="vueProps.icon" size="xs"></q-icon>
  </a>
</template>

<style scoped>
.index:active {
  transform: translateY(1px);
}
</style>
